
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/addProduct" style="color: #409eff;">发布商品</router-link></div>
          <div class="hei10"></div>
<div class="addpro">
					<div class="step" v-if="!showmoney">
						<el-steps :active="1" align-center>
							  <el-step title="定义基础产品信息" description="设置分类、定制生产规则"></el-step>
							  <el-step title="定义销售页信息" description="对外宣传销售话术"></el-step>
							  <el-step title="设定佣金及分销商可见" description="设置那些分销商可以销售，给多少佣金"></el-step>
							  <el-step title="确认发布" description="上线销售发展用户"></el-step>
						</el-steps>
					</div>
					<div class="step" v-if="!showmoney">

						<div class="tilte">定义基础产品信息<el-tooltip class="item" effect="light" content="基础信息不对外展示，仅商铺内部可见" placement="top">
													<span class="wenhao">?</span>
												</el-tooltip></div>
						<div class="con">
							<el-form ref="form" :rules="rules" @submit.native.prevent :model="form" label-width="120px">
								<div class="flex w330">
									<el-form-item label="运营商:" prop="operator">
										<el-select v-model="form.operator" placeholder="请选择运营商:">
											<el-option v-for="item in sanlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="产品类型:">
										<el-select v-model="form.plan_type_id" placeholder="请选择产品类型:">
										  <el-option v-for="item in typelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
										</el-select>
										<el-button type="primary" @click="taglog = true">自定义</el-button>
									</el-form-item>
								</div>
								<div class="flex w330">
									<el-form-item label="产品名称:" prop="name">
										<el-input v-model="form.name"  :class="{redbor:!sub1}"  @input="nijiushiwodeweiyi1" placeholder="产品名称"></el-input>
									</el-form-item>
									<el-form-item label="产品编号:" prop="sku" >
										<el-input v-model="form.sku"  :class="{redbor:!sub2}" placeholder="产品编号" @input="nijiushiwodeweiyi2"></el-input>
									</el-form-item>
								</div>
								<el-form-item class="w330" label="归属地:" prop="city">
									<el-cascader @change="changeaddress"   v-model="form.city" :options="citylist"></el-cascader>
								</el-form-item>
								<el-form-item label="生产定义:" prop="real_name_type" >
									<div class="ori">
<!-- 											<el-form-item label="身份证审核:">
												<el-radio-group v-model="form.real_name_type">
													<el-radio label="0">需审核</el-radio>
													<el-radio label="1">无需审核</el-radio>
												</el-radio-group>
												<el-tooltip class="item" effect="light" content="下单是否需要三张身份证照片，选择后订单必须有照片才会进入审核生产。" placement="top">
													<span class="wenhao">?</span>
												</el-tooltip>
											</el-form-item> -->
                                            <el-form-item label="是否需要身份证号码:">
                                            	<el-radio-group v-model="form.need_num">
                                            		<el-radio label="0">不需要</el-radio>
                                            		<el-radio label="1">需要</el-radio>
                                            	</el-radio-group>
                                            	<el-tooltip class="item" effect="light" content="下单是否需要身份证号码，选择后订单必须有身份证号才会进入审核生产。" placement="top">
                                            		<span class="wenhao">?</span>
                                            	</el-tooltip>
                                            </el-form-item>
                                            <el-form-item label="是否需要身份证照片:">
                                            	<el-radio-group v-model="form.real_name_type">
                                            		<el-radio label="1">不需要</el-radio>
                                            		<el-radio label="0">需要</el-radio>
                                            	</el-radio-group>
                                            	<el-tooltip class="item" effect="light" content="下单是否需要三张身份证照片，选择后订单必须有照片才会进入审核生产。" placement="top">
                                            		<span class="wenhao">?</span>
                                            	</el-tooltip>
                                            </el-form-item>

											<el-form-item label="生产地址:">
												<el-input v-model="form.produce_address" placeholder="生产地址"></el-input>
											</el-form-item>
									</div>
								</el-form-item>
								<el-form-item label="限制条件:">
									<div class="ori">
										<el-form-item label="不发货地址设置:">
                                            <el-button type="primary"  size="mini" plain @click="keylog = true">已设置{{mingan.citys.length}}个</el-button>
										</el-form-item>
										<el-form-item class="age" label="年龄限制(周岁):">
                                            <el-input v-model="form.min_age" placeholder="最小年龄"></el-input>
                                            ——
                                            <el-input v-model="form.max_age" placeholder="最大年龄"></el-input>
										</el-form-item>

										<div class="xiaoming">
											<el-form-item label="单人开卡数量限制:">
												<el-select v-model="form.max_purchase" placeholder="请选择最大开卡数量:">
													<el-option label="不限制" value="-1"></el-option>
													<el-option label="1" value="1"></el-option>
													<el-option label="2" value="2"></el-option>
													<el-option label="3" value="3"></el-option>
													<el-option label="4" value="4"></el-option>
													<el-option label="5" value="5"></el-option>
												</el-select>
											</el-form-item>

											<!-- 小鸣莺专用 -->
											<el-form-item label="检测周期:">
												<el-select v-model="xiaomingtime" placeholder="检测周期:">
													<el-option label="不限制" value="0"></el-option>
													<el-option label="1个月" value="1"></el-option>
													<el-option label="2个月" value="2"></el-option>
													<el-option label="3个月" value="3"></el-option>
													<el-option label="4个月" value="4"></el-option>
													<el-option label="5个月" value="5"></el-option>
													<el-option label="6个月" value="6"></el-option>
													<el-option label="7个月" value="7"></el-option>
													<el-option label="8个月" value="8"></el-option>
													<el-option label="9个月" value="9"></el-option>
													<el-option label="10个月" value="10"></el-option>
													<el-option label="11个月" value="11"></el-option>
													<el-option label="12个月" value="12"></el-option>
												</el-select>
											</el-form-item>
										</div>

									</div>
								</el-form-item>
								<!-- 风险预警设置 -->
								<el-form-item label="风险预警设置:">
									<div class="ori" v-loading="fxloading">
										<div class="fx">
											<div :class="fxs.type == 0 ? 'fxli fxact' : 'fxli' " @click="changetype(0)">使用全局默认方案</div>
											<div :class="fxs.type == 1 ? 'fxli fxact' : 'fxli' " @click="changetype(1)">使用自定义方案</div>
										</div>
										<div class="xiaoming">
											<el-form-item label="一证五户检测：">
												<el-select v-model="fxs.id_card" :disabled="fx">
													<el-option label="不检测" value="0"></el-option>
													<el-option label="检测" value="1"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="检测周期：">
												<el-select v-model="fxs.id_card_range" :disabled="fx">
													<el-option label="最近30天" value="30"></el-option>
													<el-option label="最近60天" value="60"></el-option>
													<el-option label="最近90天" value="90"></el-option>
													<el-option label="最近120天" value="120"></el-option>
													<el-option label="最近150天" value="150"></el-option>
													<el-option label="最近180天" value="180"></el-option>
												</el-select>
											</el-form-item>
										</div>
										<div class="xiaoming">
											<el-form-item label="联系电话重复：">
												<el-input v-model="fxs.address_mobile" :disabled="fx" placeholder="输入上限数值"></el-input>
											</el-form-item>
											<el-form-item label="检测周期：">
												<el-select v-model="fxs.address_mobile_range" :disabled="fx">
													<el-option label="最近30天" value="30"></el-option>
													<el-option label="最近60天" value="60"></el-option>
													<el-option label="最近90天" value="90"></el-option>
													<el-option label="最近120天" value="120"></el-option>
													<el-option label="最近150天" value="150"></el-option>
													<el-option label="最近180天" value="180"></el-option>
												</el-select>
											</el-form-item>
										</div>
										<div class="xiaoming">
											<el-form-item label="收货地址重复：">
												<el-input v-model="fxs.address" :disabled="fx" placeholder="输入上限数值"></el-input>
											</el-form-item>
											<el-form-item label="检测周期：">
												<el-select v-model="fxs.address_range" :disabled="fx">
													<el-option label="最近30天" value="30"></el-option>
													<el-option label="最近60天" value="60"></el-option>
													<el-option label="最近90天" value="90"></el-option>
													<el-option label="最近120天" value="120"></el-option>
													<el-option label="最近150天" value="150"></el-option>
													<el-option label="最近180天" value="180"></el-option>
												</el-select>
											</el-form-item>
										</div>
										<div class="fxbtm">
											<div v-if="fx"><el-button type="primary" size="small" @click="fx = false">修改默认方案</el-button></div>
											<div v-if="!fx&&fxs.type==0">
												<el-button type="primary" size="small" @click="savefx">保存默认方案</el-button>
												<el-button type="primary" size="small" @click="fx = true">取消修改默认方案</el-button>
											</div>
											<div v-if="!fx&&fxs.type==1">
												<el-button type="primary" size="small" v-if="fxs.id == ''"  @click="savefx">保存自定义</el-button>
												<el-button type="primary" size="small" v-if="fxs.id != ''" @click="fixfx">保存修改</el-button>
											</div>
											<div class="red">注：修改默认方案会导致使用默认方案的所有基础产品风控规则变更</div>
										</div>
										<div class="fxbtm hui">注：风险数据监测范围均仅限于本店铺数据，不包含运营商数据</div>
									</div>
								</el-form-item>
								<el-form-item label="生产备注:">
									<el-input style="width: 550px;" v-model="form.produce_remark" placeholder="生产备注"></el-input>
								</el-form-item>
								<el-form-item label="结算规则:">
									<el-input style="width: 550px;" v-model="form.commission_rule" placeholder="结算规则"></el-input>
								</el-form-item>

                                <el-form-item label="物流公司:">
                                    <el-select v-model="form.track" placeholder="物流公司:">
                                      <el-option v-for="item in form.tracklist" :key="item.id" :label="item.company" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
							</el-form>
						</div>
					</div>

					<div class="step" v-if="!showmoney">
						<div class="tilte">关联号池设置</div>
						<div class="con haochi">
                            <el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
                                <el-form-item>
                                	<div class="flex" style="margin-bottom: 30px;">
                                        <el-radio v-model="form.pool" label="1">关联号库（提供选号）</el-radio>
                                        <el-select v-model="form.pool_id" placeholder="请选择分销商:">
                                          <el-option v-for="item in form.poollist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>

                                        <div style="margin-left: 30px;">开放范围:</div>
                                        <el-select v-model="form.pool_use_rang" placeholder="请选择:">
                                          <el-option label="仅自己销售可用" :value="1"></el-option>
                                          <el-option label="所有分销商可用" :value="2"></el-option>
                                        </el-select>
                                    </div>
                                	<div class="flex"><el-radio v-model="form.pool" label="2">无（不提供选号）</el-radio></div>
                                </el-form-item>
                            </el-form>
						</div>
					</div>

					<div class="step" v-if="!showmoney" style="margin-bottom: 0;">
						<div class="tilte">定义商品销售页信息</div>
						<div class="con">
							<el-form ref="form" :rules="rules" @submit.native.prevent :model="shopform" label-width="180px">
								<!-- <el-form-item label="商家编码（抓单标识）:" prop="randomnum">
									{{randomnum}}
                                    <el-button plain type="primary" size="small" @click="randomlog = true">自定义</el-button>
									<el-tooltip class="item" effect="light" content="如果要使用自动抓单系统的话，请在电商平台将该码粘贴到产品后台的“货号（商品编码）”处。每个产品都有唯一标识" placement="top">
										<span class="wenhao">?</span>
									</el-tooltip>
								</el-form-item> -->
                                <el-form-item label="商家编码（抓单标识）:" prop="sku" style="width: 450px;">
                                    <div style="display: flex;">
                                        <el-input v-model="form.sku" disabled=""></el-input>
                                        <el-tooltip class="item" effect="light" content="如果要使用自动抓单系统的话，请在电商平台将该码粘贴到产品后台的“货号（商品编码）”处。每个产品都有唯一标识" placement="top">
                                            <span class="wenhao" style="height: 18px; position: relative; top: 5px;">?</span>
                                        </el-tooltip>
                                    </div>
                                </el-form-item>

                                <!-- <el-form-item label="京东特有(必须三位):" style="width: 450px;">
                                    <el-input v-model="jingdongrandom" maxlength="3" :class="{redbor:!sub4}" @input="nijiushiwodeweiyi4" placeholder="请输入京东特用抓单码"></el-input>
                                </el-form-item> -->
								<div class="flex w330">
									<el-form-item label="商品名称:" prop="title">
										<el-input v-model="form.name" disabled=""  placeholder="根据产品名自定义"></el-input>
									</el-form-item>
									<el-tooltip class="item" effect="light" content="对外展示的产品标题，能清晰描述概括产品，例：北京19元月租大王卡赠2GB流量" placement="top">
										<span class="wenhao" style="display: block; height: 29px; width: 29px; padding: 0; line-height: 29px; margin-top: 5px;">?</span>
									</el-tooltip>
								</div>
								<div class="flex w330" style="align-items: center; margin-bottom: 0px;">
									<el-form-item label="商品注意点:">
										<el-input v-model="shopform.points" placeholder="输入商品注意点"></el-input>
									</el-form-item>
								</div>
								<div class="flex w330">
									<el-form-item label="商品卖点:">
										<el-input v-model="shopform.selling_point" placeholder="输入卖点，使用逗号隔开"></el-input>
									</el-form-item>
									<el-tooltip class="item" effect="light" content="不超过3组词，例：资费低，流量大，免月租等，不宜过长" placement="top">
										<span class="wenhao" style="display: block; height: 29px; width: 29px; padding: 0; line-height: 29px; margin-top: 5px;">?</span>
									</el-tooltip>
								</div>
								<div class="flex w480">
									<el-form-item label="结算要求:">
										<el-input v-model="shopform.commission_rule" placeholder="对外展示"></el-input>
									</el-form-item>
								</div>
								<el-form-item label="销售页上传照片:" class="label200" prop="is_need_photo">
									<el-radio-group v-model="shopform.is_need_photo">
										<el-radio label="0">无需上传</el-radio>
										<el-radio label="1">需要上传</el-radio>
									</el-radio-group>
									<el-tooltip class="item" effect="light" content="仅设置是否需要在销售页下单时上传照片，选择无需上传可在批量上传照片处另行导入。" placement="top">
										<span class="wenhao">?</span>
									</el-tooltip>
								</el-form-item>
								<div class="flex">
									<el-form-item label="产品主图:" prop="img">
										<el-upload  class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadok" :auto-upload="false" :show-file-list="false" >
										  <img v-if="shopform.image1" :src="shopform.image1" class="avatar">
										  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-form-item>
								</div>
								<el-form-item label="产品详情:"  prop="edit">
									<div id="editor">

									</div>
								</el-form-item>
							</el-form>
						</div>
					</div>
					<div class="step" v-if="!showmoney" style="text-align: center;">
						<!-- <el-button type="danger" @click="productsave(0)">下一步</el-button> -->
						<el-button type="danger" @click="productsave(0)">仅保存</el-button>
						<el-button type="danger" @click="productsave(1)">设置佣金且上架</el-button>
					</div>
					<div class="step ts" v-if="!showmoney">提示：仅保存的产品位于下架中的产品中，上架产品必须设置佣金及分销商可见</div>
					<div class="step" v-if="showmoney">
						<div class="tilte">定义佣金及分销商可见</div>
						<div class="con">
							<el-form ref="form" :rules="rules" :model="moneyform" label-width="150px" @submit.native.prevent>
								<el-form-item label="分销商可见设置:" prop="visible">

											<el-form-item label="">
												<el-radio-group v-model="moneyform.visible" @change="cardid">
													<el-radio label="1">仅自己可见</el-radio>
													<el-radio label="2">全部分销商可见</el-radio>
													<el-radio label="3">选择的分销商可见</el-radio>
													<el-radio label="4">选择的分销商不可见</el-radio>
												</el-radio-group>
											</el-form-item>

											<el-form-item label="选择分销商:" v-if="kejian" @change="chakan">
                              <el-select v-model="moneyform.child_shop_ids" multiple filterable collapse-tags remote reserve-keyword placeholder="请选择分销商" >
                                <el-option v-for="item in moneyform.dislist" :key="item.child_shop_id" :label="item.name" :value="item.child_shop_id"></el-option>
                              </el-select>
											</el-form-item>

											<!-- <el-form-item label=" " v-if="kejian">
												<el-button type="primary" size="mini" v-for="item in moneyform.commission" :key="item">{{item.name}}</el-button>
											</el-form-item> -->

								</el-form-item>
								<div class="flex btm0" >
									<el-form-item label="佣金额度:" prop="commission">
										<el-input v-model="moneyform.commission" type="number" placeholder="佣金额度"></el-input>
									</el-form-item>
									<el-button type="primary"  size="mini" plain @click="log = true">分销商差异化佣金设置</el-button>
									<el-tooltip class="item" effect="light" content="给予分销商的佣金额度" placement="top">
										<span class="wenhao" style="display: block; height: 29px; width: 29px; padding: 0; line-height: 29px; margin-top: 5px;">?</span>
									</el-tooltip>
								</div>
							</el-form>
						</div>
					</div>
					<div class="step" v-if="showmoney" style="text-align: center;"><el-button type="danger" @click="bangding()">发布商品</el-button></div>

				</div>
			</div>
		</div>
        <el-dialog title="关键词设置":visible.sync="keylog" width="700px;">
        	  <div style="display: flex; justify-content: space-between;">
                  <div style="flex-basis: 370px; line-height: 30px;">
                        <div>关键词尽量采用：地市名称和区域名称，确保系统精准检查</div>
                        <div>例：河南开封市尉氏县蔡庄镇 关键词：开封市，蔡庄镇</div>
                  </div>
                  <div class="keyd" style="flex-basis: 200px;">
                      <upload-excel-component @on-selected-file="exportData" buttonName="导入" class="nobtn"></upload-excel-component>
                      <el-button type="primary"  size="mini" plain @click="xiazai">下载模板</el-button>
                  </div>
              </div>
              <div>
                    <div style="display: flex; background: #E5E5E5; color: #707070; text-align: center; line-height: 45px; margin-top: 20px;">
                          <div style="flex: 1;">原敏感地区录入</div>
                          <div style="flex: 1;">关键词编辑</div>
                    </div>
                    <div class="keylist"  style="max-height: 350px; overflow: auto;">
                        <div style="display: flex; border: 1px #EAEAEA solid;" v-for="(item,i) in keyv" :key="i">
                            <div style="flex: 1; padding:10px;"><el-input v-model="item.key1" placeholder="请输入内容"></el-input></div>
                            <div style="flex: 1; display: flex; padding:10px;">
                                <el-input v-model="item.key2" placeholder="请输入内容"></el-input>
                                <el-input v-model="item.key3" placeholder="请输入内容"></el-input>
                                <i class="el-icon-delete" @click="keydel(i)" style=" margin-left: 5px; padding-top: 8px; cursor: pointer;"></i>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: center; margin-top: 20px;"><el-button type="primary"  size="mini" @click="addkey">新增关键词</el-button></div>

              </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="keylog = false">取 消</el-button>
        		<el-button type="primary" @click="keygo">确 定</el-button>
        	  </span>
        </el-dialog>
        <el-dialog title="自定义抓单ID":visible.sync="randomlog" width="400px">
        	  <div class="randomdiv">
                  <el-input v-model="randomvalue" @input="randomnumwrite" placeholder="自定义抓单ID"></el-input>
              </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="randomlog = false">取 消</el-button>
        		<el-button type="primary" @click="randomgo" :disabled="randomone">确 定</el-button>
        	  </span>
        </el-dialog>
		<el-dialog title="自定义产品类型":visible.sync="taglog" width="400px">
			  <div class="protag">
				  <el-tag :key="item.id" v-for="item in typelist" closable :disable-transitions="false" @close="handleClose(item.name)">{{item.name}}</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">输入自定义名称</el-button>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="taglog = false">取 消</el-button>
				<el-button type="primary" @click="taglog = false">确 定</el-button>
			  </span>
		</el-dialog>
		<el-dialog title="编辑分销商佣金" :visible.sync="log" width="600px">
			  <div class="loglist">
				  <div class="log_title">{{shopform.title}}产品的佣金设置</div>
				  <div class="search">
					   <div class="add">
					  	<el-input placeholder="分销商店铺名" v-model="search" class="input-with-select"></el-input>
					  	<el-button type="primary" @click="searchgo" icon="el-icon-search"></el-button>
					  </div>
				  </div>
			  </div>

			  <div class="con" v-loading="loading">
			  	<div class="list">
			  		<div class="th">分销商店铺</div>
			  		<div class="th">佣金</div>
			  	</div>
				<div class="listl">
					<!-- 佣金设置列表 -->
					<div class="list" v-for="item in moneyform.list" :key="item.child_shop_id">
						<div class="td">{{item.name}}</div>

						<div class="td" v-if="item.commission_is_set == 1?true:false">
							{{item.commission}}
							<el-button type="primary" size="mini" plain style=" margin-left: 30px;" @click="fixmoney(item.child_shop_id)">修改</el-button>
						</div>
                        <div class="td" v-if="item.commission_is_set != 1?true:false">
                        	默认佣金
                        	<el-button type="primary" size="mini" plain style=" margin-left: 30px;" @click="fixmoney(item.child_shop_id)">修改</el-button>
                        </div>
					</div>

				</div>
			  </div>

			  <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="log = false">确定</el-button>
			  </span>
		</el-dialog>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import { provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data'
	import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	import E from 'wangeditor'
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			UploadExcelComponent
		},
		name: 'addProduct',
		data(){
			return{
                keylog:false,
                keyv:[
                    {"key1":"","key2":"","key3":""}
                ],

				taglog:false,
				taglist:['类型1','类型2'],
				inputVisible: false,
				inputValue: '',

				mingan:{
					city:"",
					citys:[],
					fixcitys:[]
				},
				randomnum:"",
                jingdongrandom:"",
				search:"",
				msg:"hello",
				log:false,
				loading:false,

				typelist:{},
				citylist:provinceAndCityData,
				rules: {
				  operator: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
				  name: [{ required: true, message: '必填', trigger: 'blur' }],
				  sku: [{ required: true, message: '必填', trigger: 'blur' }],
				  city: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
				  real_name_type: [{ required: true, message: '请输入', trigger: 'change' }],
				  randomnum: [{ required: true, message: '请输入抓单码', trigger: 'change' }],
				  // title: [{ required: true, message: '必填', trigger: 'change' }],
				  is_need_photo: [{ required: true, message: '必选', trigger: 'change' }],
				  img: [{ required: true, message: '必选', trigger: 'change' }],
				  edit: [{ required: true, message: '必填', trigger: 'change' }],
				  visible: [{ required: true, message: '必选', trigger: 'change' }],
				  commission: [{ required: true, message: '必填', trigger: 'change' }],
				},
				form:{
                    tracklist:"",
                    track:"1",
                    poollist:"",
                    pool:"2",
                    pool_id:"",
					produce_address:"",
					operator:"",
					name:"",
					sku:"",
					plan_type_id:"",
					province:"",
					city:[],
					real_name_type:'0',
                    real_name_type2:'0',
					produce_remark:"",
					status:"",
					comname:"",
					min_age:"",
                    max_age:"",
					max_purchase:"-1",
					need_num:"1",
					haochinum:1,
					haochival:1,

					address_province:"",
					address_city:"",
					address_district:"",
					commission_rule:"",
          pool_use_rang:""
				},
				shopform:{
					product_id:"",
					title:"",
					status:"",
					parent_id:"",
					selling_point:"",
					commission_rule:"",
					is_need_photo:'0',
					description:"",
					image1:"",
					imageUrl: '',
					imageUrl2: '',
          pool_use_rang:""
				},
				moneyform:{
					order_page_id:"",
					visible:'1',
					commission:"",
					child_shop_ids:"",
					dislist:"",
					money:"",
					list:""
				},
				kejian:false,
				sub1:true,
				sub2:true,
				sub3:false,
                sub4:true,
				showmoney:false,
				sanlist:[
					// {name:"中国联通",id:10010},
					// {name:"中国移动",id:10086},
					// {name:"中国电信",id:10000},
					{name:"中国广电",id:10099}
				],
				url:"",
                randomvalue:"",
                randomone:false,
                randomlog:false,
				shop_id:"",

				xiaomingtime:"",
				xiaomingying:"",
				fx:true,
				fxs:{
					id:"",
					id_card:"",
					id_card_range:"",
					address_mobile:"",
					address_mobile_range:"",
					address:"",
					address_range:"",
					type:"",
					status:""
				},
				fxsid:"",
				fxloading:true
			}
		},
		created() {
			//地址配置,用于下载模板
			if(window.location.href.indexOf("91haoka_platform") > -1){
				console.log("线上项目，谨慎操作。")
				this.url = window.location.origin+"/91haoka_platform/"
			}else{
				this.url = ""
			}
			//小鸣莺家用
			var xiaomingying = JSON.parse(localStorage.getItem('USER'));
			this.xiaomingying = xiaomingying.id

            //获取快递公司
            this.gettracklist()
            //号池
			this.getlists()
			//获取分销商
			this.getdislist()
			//获取类型
			this.getproductstype();

			//随机生成10位数
            axios.get('/api/sys/str-random')
            	.then(response => {
            		if (response.data.msg.code == 0) {
            			this.randomnum = response.data.data
            		} else {
            			this.$message.error(response.data.msg.info);
            		}

            	})

            axios.get('/api/gth/user/shop')
                .then(response => {
                    if(response.data.msg.code == 0){
                        this.shop_id = response.data.data.shop_id
                    }else{
                        if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                        that.$message.error(response.data.msg.info);
                    }
				})
			this.getfx()
		},
		mounted() {

			var that = this
			var editor = new E('#editor');
			editor.customConfig.uploadImgServer = '/upload'
			editor.customConfig.showLinkImg = false
			editor.customConfig.onchange = function (html) {
				that.shopform.description = html
			}
			editor.customConfig.customUploadImg = function (files, insert) {
				var formData = new FormData();
				formData.append("pic",files[0]);
				axios.post('/api/plan-market/order-page/upload-pic',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							insert(response.data.data)

						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			}
			editor.create();

		},
		methods:{
			//更换默认和自定义
			changetype:function(type){
				this.fxs.type = type
				this.fxloading = true
				this.getfx()
			},
			//更新风险全局方案
			fixfx:function(){
				var that = this;
				var sj = {
					service_id:this.fxs.id,
					id_card:this.fxs.id_card,
					id_card_range:this.fxs.id_card_range,
					address_mobile:this.fxs.address_mobile,
					address_mobile_range:this.fxs.address_mobile_range,
					address:this.fxs.address,
					address_range:this.fxs.address_range,
					type:this.fxs.type,
					status:this.fxs.status
				}
				axios.post('/api/plan-market/service/update',sj)
					.then(response => {
						if(response.data.msg.code == 0){
							that.$message({
								message: '保存成功',
								type: 'success'
							});
							that.fx = true
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//保存风险全局方案
			savefx:function(){
				var that = this;
				var sj = {
					id_card:this.fxs.id_card,
					id_card_range:this.fxs.id_card_range,
					address_mobile:this.fxs.address_mobile,
					address_mobile_range:this.fxs.address_mobile_range,
					address:this.fxs.address,
					address_range:this.fxs.address_range,
					type:this.fxs.type,
					status:this.fxs.status
				}
				axios.post('/api/plan-market/service/create',sj)
					.then(response => {
						if(response.data.msg.code == 0){
							that.$message({
								message: '保存成功',
								type: 'success'
							});
							that.fxs = response.data.data
							if(that.fxs.type == 1){
								that.fxsid = response.data.data.id
							}
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取风险全局方案
			getfx:function(){
				var that = this;
				if(this.fxs.type == 0){
					this.fx = true
					axios.get('/api/plan-market/service/index?type=0')
						.then(response => {
							if(response.data.msg.code == 0){
								if(response.data.data == null){
									this.fxs = {
										id:"",
										id_card:"",
										id_card_range:"",
										address_mobile:"",
										address_mobile_range:"",
										address:"",
										address_range:"",
										type:0,
										status:""
									}
								}else{
									this.fxs = response.data.data
								}
							}else{
								that.$message.error(response.data.msg.info);
							}
							this.fxloading = false
						})
				}else{
					this.fx = false
					axios.get('/api/plan-market/service/index?type=1&service_id='+ this.fxsid)
						.then(response => {
							if(response.data.msg.code == 0){
								if(response.data.data == null){
									this.fxs = {
										id:"",
										id_card:"",
										id_card_range:"",
										address_mobile:"",
										address_mobile_range:"",
										address:"",
										address_range:"",
										type:1,
										status:""
									}
								}else{
									this.fxs = response.data.data
								}
							}else{
								that.$message.error(response.data.msg.info);
							}
							this.fxloading = false
						})
				}

			},
            //手动添加关键词
            keygo:function(){
                this.mingan.citys =[]
                this.mingan.fixcitys = []
                for(var i in this.keyv){
                    if(this.keyv[i].key1 != "" && this.keyv[i].key2 != "" && this.keyv[i].key3 != "" ){
                        this.mingan.citys.push(this.keyv[i].key1)
                        var k2 = this.keyv[i].key2
                        var k3 = this.keyv[i].key3
                        var obj={}
                        obj[k2] = k3
                        this.mingan.fixcitys.push(obj)
                    }
                }
                this.keylog = false
                console.log(this.mingan.citys)
                console.log(this.mingan.fixcitys)
            },
            //删除关键词
            keydel:function(i){
                this.keyv.splice(i,1);
            },
            //增加关键词
            addkey:function(){
                this.keyv.push({"key1":"","key2":"","key3":""})
            },
            //获取快递公司
            gettracklist:function(){
                var that = this
                axios.get('/api/plan-market/logistics-companies')
                	.then(response => {
                		that.form.tracklist = response.data.data
                	})
            },
            //获取号池
            getlists:function(){
                var that = this
                axios.get('/api/plan-market/pool/list?page=1&page_size=1000&status=1')
                	.then(response => {
                		that.form.poollist = response.data.data.data
                	})
            },
            //自定义抓单码唯一性
            randomnumwrite:function(){
                var that = this
                axios.get('/api/plan-market/order-page/fetch-code/isexist?fetch_code='+this.randomvalue)
                    .then(response => {
                        if(response.data.msg.code == 0){
                            that.randomone = false
                        }else{
                            that.randomone = true
                        }
                    })
            },
            //自定义抓单码点击确认
            randomgo:function(){
                this.randomnum = this.randomvalue
                this.randomlog = false
            },
			//搜索功能
			searchgo:function(){
				this.loading = true
				this.getmoneylist();
			},
			//下载
			xiazai:function(){

				const a = document.createElement('a');
				a.setAttribute('download', '敏感地区模板.xlsx');
				a.setAttribute('href', this.url+'static/mingandiqu.xlsx');
				a.click();

			},
			//修改佣金时执行全部佣金赋值并保存后重新获取一下列表和佣金
			// fixallmoney:function(){
			// 	var that = this;
			// 	var formData = new FormData();
			// 	formData.append("order_page_id",this.moneyform.order_page_id);
			// 	formData.append("visible",this.moneyform.visible);
			// 	formData.append("commission",this.moneyform.commission);
			// 	formData.append("child_shop_ids",this.moneyform.child_shop_ids);
			//
			// 	axios.post('/api/gth/order-page/visible',formData)
			// 		.then(response => {
			// 			if(response.data.msg.code == 0){
			// 				that.getmoneylist();
			// 			}else{
			// 				that.$message.error(response.data.msg.info);
			// 			}
			// 		})
			// },
			//个性化编辑佣金
			fixmoney:function(id){
				this.$prompt('请输入金额', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				}).then(response => {
					var that = this;
					var formData = new FormData();
					formData.append("order_page_id",that.moneyform.order_page_id);
					formData.append("child_shop_id",id);
					formData.append("commission",response.value);

					axios.post('/api/plan-market/order-page/commissions/update',formData)
						.then(response => {
							if(response.data.msg.code == 0){
								that.loading = true
								this.getmoneylist();
								that.$message({
								  message: '保存成功！',
								  type: 'success'
								});
							}else{
								that.$message.error(response.data.msg.info);
							}
						})
				})
			},
			//获取分销商和佣金
			getmoneylist:function(){
				var that = this;
				axios.get('/api/plan-market/order-page/commissions?order_page_id='+that.moneyform.order_page_id)
					.then(response => {
						if(response.data.msg.code == 0){
							that.moneyform.list = response.data.data.data
							that.loading = false
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},

			chakan:function(){
				console.log(this.moneyform.child_shop_ids)
			},
			//产品名验证唯一性
			nijiushiwodeweiyi1:function(){
				var that = this;
				axios.get('/api/plan-market/product/name/isexist?name='+that.form.name)
					.then(response => {
						if(response.data.msg.code == 0){
							this.sub1 = true
						}else{
							this.sub1 = false
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//产品编号验证唯一性
			nijiushiwodeweiyi2:function(){
				var that = this;
				axios.get('/api/plan-market/product/sku/isexist?sku='+this.form.sku)
					.then(response => {
						if(response.data.msg.code == 0){
							this.sub2 = true
						}else{
							this.sub2 = false
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//商品名验证唯一性
			nijiushiwodeweiyi3:function(){
				var that = this;
				axios.get('/api/plan-market/order-page/name/isexist?title='+this.shopform.title)
					.then(response => {
						if(response.data.msg.code == 0){
							this.sub3 = true
						}else{
							this.sub3 = false
							that.$message.error(response.data.msg.info);
						}
					})
			},
            //京东唯一性
            nijiushiwodeweiyi4:function(){
				this.jingdongrandom = this.jingdongrandom.trim()
                if(this.jingdongrandom == ""){
                    this.sub4 = true
                }else{
                   var that = this;
                   axios.get('/api/plan-market/order-page/fetch-code?fetch_code2='+this.jingdongrandom)
                   	.then(response => {
                   		if(response.data.msg.code == 0){
                   			this.sub4 = true
                   		}else{
                   			this.sub4 = false
                   			that.$message.error(response.data.msg.info);
                   		}
                   	})
                }

            },
			//身份证审核
			cardid:function(){
				this.moneyform.child_shop_ids = "";
				if(this.moneyform.visible == 3 || this.moneyform.visible == 4){this.kejian = true}
				if(this.moneyform.visible == 1 || this.moneyform.visible == 2){this.kejian = false}
			},
			//获取全部分销商
			getdislist:function(){
				var that = this;
				axios.get('/api/gth/partner/list?page_size=10000')
					.then(response => {
						if(response.data.msg.code == 0){
							that.moneyform.dislist = response.data.data.data
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//保存产品
			productsave:function(status){
                console.log(this.jingdongrandom)
				if(this.sub1 == false || this.sub2 == false || this.sub4 == false || this.form.name == "" || this.form.sku == ""){
					return false
				}
                if(this.jingdongrandom == "" || this.jingdongrandom == null){

                }else{
                    if(this.jingdongrandom.length != 3 ){
                        this.$message.error("京东抓单码必须三位或者不填写");
                        return false
                    }
                }
				//发布还是仅保存
				this.form.status = status
				this.shopform.status = status
				var that = this;
				var formData = {
					name:this.form.name,
					sku:this.form.sku,
					operator:this.form.operator,
					plan_type_id:this.form.plan_type_id,
					province:this.form.address_province,
					city:this.form.address_city,
					real_name_type:this.form.real_name_type,
					produce_remark:this.form.produce_remark,
					max_purchase:this.form.max_purchase,
					min_age:this.form.min_age,
                    max_age:this.form.max_age,
					status:this.form.status,
					produce_address:this.form.produce_address,
					commission_rule:this.form.commission_rule,
          pool_use_rang:this.form.pool_use_rang,
					warn_province:this.mingan.citys,
					warn_city:this.mingan.fixcitys,
                    tracking_company_id:this.form.track,
					need_num:this.form.need_num,
					max_purchase_time:this.xiaomingtime,
					service_id:this.fxs.id
				}
                if(this.form.pool == 1 ){
                    formData.pool_id = this.form.pool_id
                }
				axios.post('/api/gth/products/release',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							that.shopform.product_id = response.data.data.id
							//成功获取到产品id后执行保存商品
							that.shopsave();

						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//保存商品
			shopsave:function(){

				var that = this;
				var formData = {
					title:this.form.name,
					product_id:this.shopform.product_id,
					selling_point:this.shopform.selling_point,
					commission_rule:this.shopform.commission_rule,
          pool_use_rang:this.form.pool_use_rang,
					is_need_photo:this.shopform.is_need_photo,
					description:this.shopform.description,
					image1:this.shopform.image1,
					fetch_code:this.form.sku,
					status:0,
                    fetch_code2:this.jingdongrandom,
				}

				axios.post('/api/plan-market/order-page/release',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							that.moneyform.order_page_id = response.data.data.id
							//获取分销商列表和佣金
							this.getmoneylist()
							if(this.form.status == 0){
								that.$message({
								  message: '保存商品成功！',
								  type: 'success'
								});
								this.$router.push({
									path: '/productionDelivery'
								})
							}else{
								that.showmoney = true;
							}
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//绑定佣金分销商
			bangding:function(){
                if(this.moneyform.commission == ""){
                    this.$message({
                        message: '请先编辑佣金！',
                        type: 'success'
                    });
                    return false
                }
				var that = this;
				var formData = new FormData();
				formData.append("order_page_id",this.moneyform.order_page_id);
				formData.append("visible",this.moneyform.visible);
				formData.append("commission",this.moneyform.commission);
				formData.append("child_shop_ids",this.moneyform.child_shop_ids);

				axios.post('/api/gth/order-page/visible',formData)
					.then(response => {
						if(response.data.msg.code == 0){
                               axios.post('/api/gth/order-page/put-sale',{order_page_id:that.moneyform.order_page_id,status:100})
                               	.then(response => {
                               		if(response.data.msg.code == 0){
                                        //绑定分销商成功后上架（落基进入审核）

                                        if( this.shop_id == 50481 || this.shop_id == 304676){
                                                that.$message({
                                                    message: '商品已发起审核！',
                                                 type: 'success'
                                                });
                                                that.$router.push({
                                                    path: '/productionDelivery',
                                                })
                                        }else{
                                            that.$message({
                                              message: '商品发布成功！',
                                              type: 'success'
                                            });
                                            that.$router.push({
                                                path: '/productionDelivery',
                                            })
                                        }
                               		}else{
                               			that.$message.error(response.data.msg.info);
                               		}
                               	})
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//单个图片上传
			uploadok:function(file){
				var that = this;
				var formData = new FormData();
				formData.append("pic",file.raw);
				axios.post('/api/plan-market/order-page/upload-pic',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							that.shopform.image1 = response.data.data
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},
			uploadok2:function(file){
				var that = this;
				var formData = new FormData();
				formData.append("pic",file.raw);
				axios.post('/api/plan-market/order-page/upload-pic',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							that.shopform.share_img = response.data.data
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//选择省市区
			changeaddress:function(v){
				this.form.address_province = CodeToText[v[0]],
				this.form.address_city = CodeToText[v[1]],
				console.log("选中的省市"+this.form.address_province+this.form.address_city)
			},
			//导入敏感地区
			exportData:function(data) {

				this.mingan.citys = []
				this.mingan.fixcitys = []
				for(var i = 0 ;i < data.results.length; i++){
					this.mingan.citys.push(data.results[i]['敏感地区'])

					if(data.results[i]['修改敏感地区'].indexOf(",") > -1){
						var arr = data.results[i]['修改敏感地区'].split(',')
					}
					else if(data.results[i]['修改敏感地区'].indexOf("，") > -1){
						var arr = data.results[i]['修改敏感地区'].split('，')
					}
					else{
						return false
						that.$message.error("数据出错了，请检查格式");
					}
					var obj = {}
					obj[arr[0]] = arr[1]
					this.mingan.fixcitys.push(obj)

                    var obj2 = {}
                    obj2['key1'] = data.results[i]['敏感地区']
                    obj2['key2'] = arr[0]
                    obj2['key3'] = arr[1]

                   this.keyv.push(obj2)
				}
                console.log(this.mingan.citys)
                console.log(this.mingan.fixcitys)
				this.$message({
				  message: '导入成功，共计'+this.mingan.citys.length+'条',
				  type: 'success'
				});
			},
			//获取产品类型
			getproductstype:function(){
				var that = this
				axios.get("/api/gth/plan-type")
				  .then(function(response) {
					  if(response.data.msg.code == 0){
					  	that.typelist = response.data.data
					  }else{
					  	that.$message.error(response.data.msg.info);
					  }

				  })
			},

			loggo:function(){
				console.log("a")
			},

			//自定义产品类型
			handleClose(tag) {
				this.taglist.splice(this.taglist.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
				  this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				var that = this;
				var formData = new FormData();
				formData.append("name",this.inputValue);
				axios.post('/api/gth/plan-type/release',formData)
					.then(response => {
						if(response.data.msg.code == 0){
							that.getproductstype();
							that.$message({
							  message: '添加成功',
							  type: 'success'
							});
						}else{
							that.$message.error(response.data.msg.info);
						}
					})
				let inputValue = this.inputValue;
				if (inputValue) {
				  this.taglist.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			}
		}

	}
</script>

<style lang="scss" scoped>
/deep/ .w-e-menu{ z-index: 1001 !important;}
  /deep/ .w-e-text-container{z-index: 1000 !important; }
	.index{
    /deep/ .el-message-box__wrapper{ z-index: 20000 !important;}
		.xiaoming{ display: flex;
			/deep/ .el-form-item{ flex: 1;}
		}
		.ts{ text-align: center; font-size: 14px; color: #666;}
		.add{
			text-align: right; position: relative;
			/deep/ .input-with-select{ width: 280px;}
			/deep/ .el-button{ position: absolute; right: 0px; top: 0px;}
		}

		.loglist{
			display: flex; justify-content: space-between; margin-bottom: 30px;
			.log_title{ padding: 7px 10px;}
		}
		.listl{ height: 350px; overflow: auto;
			.el-input__inner{ border: none; text-align: center}
		}
		.list{

			display: flex; text-align: center; color: #727272; line-height: 45px; border: 1px #EAEAEA solid; margin-top: -1px;
			.th{ flex: 1; background: #F9F9F9; font-size: 14px; }
			.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
		}
		.el-pagination{ text-align: right; margin: 20px 0}
		.el-dialog__wrapper{ z-index: 19999 !important;}
		.keyd{
            display: flex;
            .is-plain{ height: 30px; line-height: 30px; padding: 0 10px; margin-left: 10px; }
            #drop{
            	.el-button--primary{ background: #409EFF; border: 1px #409eff solid; height: 30px; line-height: 30px; padding: 0 20px;}
            }
        }
		.protag{
			/deep/ .el-tag{ margin-right: 20px; margin-bottom: 20px;}
		}
    }
		.addpro{

			/deep/ .el-steps{ padding: 30px 0;}
            /deep/ .el-step__title{ text-align: center; padding: 0;}
            /deep/ .el-step__description{ text-align: center; padding: 0;}
            .ts{ padding: 20px 0;}
			.step{ background: #FFFFFF;

                /deep/ .el-step__icon{ width: 36px; height: 36px;}
                /deep/ .el-step__line{ top: 17px;}
                /deep/ .is-process{ color:#C0C4CC; border-color:#C0C4CC; font-weight: 400}
				.redbor{
					/deep/ .el-input__inner{border: 1px #EEF7FF solid;}
				}
				.tilte{ background: #F9F9F9; padding-left: 30px; line-height: 45px; font-size: 14px;
					span{ background: #B1E4FF; color: #FFFFFF; float: right; line-height: 15px; cursor: pointer; padding: 5px 0; display: block; width: 24px; text-align: center; margin-right: 20px; margin-top: 8px; border-radius: 14px;}
				}
				.w330{
					/deep/ .el-input__inner{ width: 330px !important;}
				}
				.w480{
					/deep/ .el-input__inner{ width: 480px !important;}
				}
				.con{ background: #FFFFFF; padding: 35px;

					.flex{ display: flex;}
					.ori{ background: #FBFBFB; padding: 20px 10px;
						.fx{ display: flex; position: relative; left: -10px; top: -20px; background: #FFFFFF;
							.fxli{ flex-basis: 200px; text-align: center; border-top: 3px #FFFFFF solid;  line-height: 40px; cursor: pointer;}
							.fxact{ background: #FBFBFB; border-top: 3px #EEF7FF solid;}
						}
						.fxbtm{ display: flex; padding-left: 50px;
							.red{ margin-left: 20px; color: #FF3B3B;}
						}
						.hui{ color: #999;}
						/deep/ .el-input{ width: 300px;}
						/deep/ .el-form-item{ margin-bottom: 20px;}
						/deep/ .el-form-item__label{ width: 150px !important;}
						.age .el-input{ width: 150px;}
						.wenhao2{color: #999; font-size: 14px;}
						.no{
							display: flex; align-items: center;
							#drop{
								/deep/ .el-button--primary{ background: #409EFF; border: 1px #409eff solid;}
							}
							.nonum{ background: #409EFF; padding: 0px 10px; line-height: 35px; height: 35px; color: #FFFFFF; border-radius: 3px; display: block;}
							.el-button{ }
							span{ margin: 0 20px;}
						}

					}
				}

				.haochi{
                    /deep/ .el-radio__label{ line-height: 40px;}
					/deep/ .el-select{ margin-left: 20px;}
				}
				.btm0 {
					/deep/ .el-button{ margin-left: 20px;}
					/deep/ .el-form-item{ margin-bottom: 0;}
				}
				.label200 .el-form-item__label{ width: 180px !important;}
				.avatar-uploader .el-upload {
					border: 1px dashed #d9d9d9;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
				  }
				  .avatar-uploader .el-upload:hover {
					border-color: #409EFF;
				  }
				  .avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 178px;
					height: 178px;
					line-height: 178px;
					text-align: center;
				  }
				  .avatar {
					width: 178px;
					height: 178px;
					display: block;
				  }
				.wenhao{ background: #B1E4FF; color: #FFFFFF; line-height: 15px; cursor: pointer; padding: 5px 11px; margin-left: 20px; text-align: center;  border-radius: 14px;}
			}


	}
</style>
